<template>
  <div>
    <div style="height:50px;line-height:50px;background:#eee">
      <span class="iconfont icon-left" style="padding:0 10px" @click="goUpperStory()"></span>
      <span>百家姓</span>
    </div>
    <div v-if="arr">
      <ul class="item">
        <li v-for="item in arr.Array" :key="item">{{item}}</li>
      </ul>
      <!-- <div style="border:1px solid #000;height:30px;">热门推荐</div>
      <ul>
          <li v-for="item in arr.Hot.arr" :key="item">{{item}}</li>
      </ul> -->
    </div>
  </div>
</template>
<script>
import genealogyArr from "../../assets/json/genealogy.json";
export default {
  data: () => ({
    arr: null
  }),
  created() {
    this.arr = genealogyArr;
  },
  mounted() {
    console.log(genealogyArr);
  },
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.item {
  > li {
    text-align: center;
    padding: 5px 0;
    width: 50%;
    display: inline-block;
  }
}
</style>